@import '../common/init.scss';
@import '../common/header.scss';
@import '../common/footer.scss';
@import '../common/body.scss';
@import '../common/constants.scss';
@import 'course_nav.scss';

.main {
  .wrapper {
    .course-list {
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;

      li {
        $courseItemHeight: 280px;
        $thumbnailHeight: 158px;
        width: 278px;
        height: $courseItemHeight;
        background: #fff;
        margin-bottom: 20px;
        .thumbnail-group {
          width: 100%;
          height: $thumbnailHeight;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .course-info {
          padding: 16px;
          width: 100%;
          box-sizing: border-box;
          height: $courseItemHeight - $thumbnailHeight;
          position: relative;

          .title {
            color: $mainFontColor;
          }
          .author {
            margin-top: 10px;
            color: $assistFontColor;
            font-size: 14px;
          }
          .price-group {
            position: absolute;
            left: 16px;
            right: 16px;
            bottom: 16px;
            text-align: right;

            .free {
              color: rgb(126, 211, 33);
            }
            .pay {
              color: rgb(245, 74, 74);
            }
          }
        }
        &:hover {
          box-shadow: 0 3px 14px rgba(0, 0, 0, 0.1);
        }
      }
    }
  }
}
